<template>
  <div id="app">
    <!--顶部-->
    <header>
      <img src="./assets/img/back.png"
           alt=""
           class="left">
      <p>订单确认</p>
    </header>
    <!--选项-->
    <section>
      <!--用户信息-->
      <article class="user-info clearfix"
               @click="dia1Visibility=true">
        <figure class="info-items left clearfix">
          <img src="./assets/img/didian.png"
               alt="地点"
               class="left">
          <div class="left info">
            <p class="user"><span class="name">{{userName}}</span><span class="phone">{{phone}}</span></p>
            <p class="address">{{addrFull}}</p>
          </div>
  
        </figure>
        <img class="arrow right"
             src="./assets/img/arrow.png"
             alt="箭头"></img>
      </article>
      <!--支付方式-->
      <article class="pay-way">
        <p class="title">支付方式</p>
        <figure class="clearfix items">
          <img src="./assets/img/weixin.png"
               alt="微信"
               class="weixin left">
          <div class="text left">
            <p class="text1">微信支付</p>
            <p class="text2">推荐已在微信中绑定银行卡的用户使用</p>
          </div>
          <img src="./assets/img/ok.png"
               alt="ok"
               class="right icon-ok">
        </figure>
      </article>
      <!--优惠券-->
      <article class="coupon clearfix">
        <p class="left title">优惠券</p>
        <img src="./assets/img/arrow.png"
             alt="箭头"
             class="right">
        <p class="right text">共有10张，已选0张</p>
      </article>
      <!--订单详情-->
      <article class="details">
        <p class="title">订单详情</p>
        <figure class="goods clearfix">
          <img src="./assets/img/opera.png"
               alt="娥佩兰"
               class="left">
          <div class="right text">
            <p class="text1">娥佩兰 Opera 薏仁水化妆水 500ml 保湿爽肤水舒缓干燥</p>
            <p class="text2">通用，40片</p>
            <p class="text3 clearfix"><span class="cost left">￥ 200.0</span><span class="count right">×1</span></p>
          </div>
        </figure>
        <p class="balance right"><span>小计:</span><span>￥ 200.0</span></p>
      </article>
    </section>
    <!--底部-->
    <footer class="clearfix">
  
      <p class="money left"><span>实付款:</span><span>￥200.0</span></p>
      <p class="payfor right">支付订单</p>
  
    </footer>
    <adialog v-show="dia1Visibility"></adialog>
    <adialog2 :list-data="comunities"
              v-show="dia2Visibility"></adialog2>
  </div>
</template>

<script>
import hub from './hub.js'
import adialog from './components/AddressDialog.vue'
import adialog2 from './components/AddressDialog2.vue'
export default {
  name: 'app',
  components: {
    adialog,
    adialog2
  },
  data() {
    return {
      dia1Visibility: false,
      dia2Visibility: false,
      // 社区
      comunities: [
        { name: '浙江省杭州市江干区' },
        { name: '浙江省杭州市拱墅区' },
        { name: '浙江省杭州市西湖区' },
        { name: '浙江省杭州市滨江区' }
      ],
      userName: '樱桃小丸子',
      phone: '188*****453',
      addr1: '浙江省杭州市滨江区',
      addr2: '新行路306号',
    }
  },
  methods: {
    showDia2() {
      this.dia2Visibility = true;
    }
  },
  computed: {
    addrFull() {
      return this.addr1 + this.addr2;
    }

  },
  created() {
    hub.$on('comm', this.showDia2)
    hub.$on('dia2app', () => {
      this.dia2Visibility = false;
    });
    hub.$on('submit-info', (r) => {
      // 简单的验证
      if (r[0] != '') {
        this.userName = r[0];
      }
      if ((r[1]+'').length>8) {
        this.phone = r[1];
      }
      if((r[2]!='')&&(r[3]!='')&&(r[2]!='选择所在区域')){
        this.addr1 = r[2];
        this.addr2 = r[3];
      }
      
      this.dia1Visibility = false;
    });
  }
}
</script>

<style lang="scss">
$white:#ffffff;
$gray:#f4f4f4;
$black:#111111;
$pink:#f13160;
$color3:#333333;
$color6:#666666;
$color8:#888888;
$colorbe:#bebebe;
$size26:0.3466666666666667rem;
$size30:0.4rem;
$size20:0.26666666666666666rem;
$size22:0.29333333333333333rem;
$size100:1.3333333333333333rem;
.left {
  float: left;
}

.right {
  float: right;
}

.clearfix:after {
  display: block;
  clear: both;
  content: "";
  visibility: hidden;
  height: 0;
}

html,
body,
#app {
  width: 100%;
  height: 100%;
}

#app {
  background-color: $gray;
  color: $black;
  header,
  footer {
    position: fixed;
    width: 100%;
  } // 头部
  section {
    position: absolute;
    width: 100%;
  }
  header {
    height: 1.2rem;
    background-color: $white;
    img {
      width: 0.29333333333333333rem;
      height: 0.52rem;
      margin: 0.37333333333333335rem $size30;
    }
    p {
      position: absolute;
      width: 100%;
      line-height: 1.2rem;
      font-size: $size30;
      text-align: center;
    }
  } // 尾部
  footer {
    height: $size100;
    font-size: $size26;
    bottom: 0;
    background-color: $white;
    p {
      width: 3.466666666666667rem;
      line-height: $size100;
      span:nth-child(2) {
        color: $pink;
        margin-left: 0.2rem;
      }
    }
    .money {
      padding-left: $size30;
    }
    .payfor {
      background-color: $pink;
      text-align: center;
      color: $white;
    }
  } // 选项
  section {
    top: 1.2133333333333334rem;
    article {
      width: 100%;
      background-color: $white;
    }
    .user-info {
      height: 1.7333333333333334rem;
      .arrow {
        position: relative;
        width: 0.13333333333333333rem;
        height: 0.29333333333333333rem;
        top: 50%;
        margin-top: -0.16rem;
        margin-right: $size30;
      }
      .info-items {
        margin-top: $size30;
        margin-left: $size30;
        img {
          width: 0.32rem;
          height: $size30;
        }
        .info {
          margin-left: 0.2rem;
        }
        .user {
          font-size: $size26;
        }
        .address {
          font-size: $size22;
          color: $color6;
          margin-top: $size20;
        }
        .name {
          color: $black;
        }
        .phone {
          color: $color6;
          margin-left: $size20;
        }
      }
    }
    .pay-way {
      height: 2.4rem;
      margin-top: $size20;
      padding-top: 0.30666666666666664rem;
      .title {
        font-size: $size26;
        margin-left: $size30;
      }
      .items {
        margin-left: $size30;
        margin-top: 0.5333333333333333rem;
      }
      .weixin {
        width: 0.8rem;
        height: 0.8rem;
      }
      .text {
        margin-left: $size20;
      }
      .text1 {
        font-size: $size26;
      }
      .text2 {
        font-size: $size22;
        margin-top: 0.12rem;
        color: $color8;
      }
      .icon-ok {
        width: 0.4266666666666667rem;
        height: 0.4266666666666667rem;
        margin-right: $size30;
        margin-top: 0.48rem;
      }
    }
    .coupon {
      height: 1.0666666666666667rem;
      margin-top: $size20;
      p {
        line-height: 1.0666666666666667rem;
      }
      .title {
        font-size: $size26;
        color: $color3;
        margin-left: $size30;
      }
      .text {
        font-size: $size22;
        color: $color8;
        margin-right: 0.2rem;
      }
      img {
        width: 0.13333333333333333rem;
        height: 0.29333333333333333rem;
        margin-right: 0.4rem;
        margin-top: $size30;
      }
    }
    .details {
      height: 4.8rem;
      margin-top: $size20;
      margin-bottom: 1.3333333333333333rem;
      .title {
        color: $colorbe;
        padding-top: $size30;
        margin-left: $size30;
        margin-right: $size30;
        padding-bottom: $size20;
        border-bottom: 0.013333333333333334rem solid $colorbe;
      }
      .goods {
        margin-top: $size30;
        margin-left: $size30;
        margin-right: $size30;
        border-bottom: 0.013333333333333334rem solid $colorbe;
        img {
          width: 1.8666666666666667rem;
          height: 1.8666666666666667rem;
        }
        .text {
          width: 6.933333333333334rem;
        }
        .text1 {
          font-size: $size26;
          color: $black;
        }
        .text2 {
          font-size: $size22;
          color: $color8;
          margin-top: 0.2rem;
        }
        .text3 {
          margin-top: 0.28rem;
          margin-bottom: 0.28rem;
        }
        .cost {
          font-size: $size22;
          color: $black;
        }
        .count {
          font-size: $size22;
          color: $color8;
        }
      }
      .balance {
        font-size: $size22;

        line-height: 1.0666666666666667rem;
        margin-left: $size30;
        margin-right: $size30;
        span:nth-child(1) {
          color: $color8;
        }
        span:nth-child(2) {
          margin-left: 0.2rem;
          color: $pink;
        }
      }
    }
  }
}
</style>
